<template>
    <div id="depart">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title">院系管理</span>
        </div>
        <div class="list">
            <div class="list_head">
                <el-button class="float-right" type="primary" @click="defaultDepartModel">下载模板</el-button>
                <el-button type="primary" @click="defaultDepartList" :disabled="list.length==0">下载院系班级信息</el-button>
                <el-upload class="float-right" :action="actionUrl" :on-success="handleSuccess" :on-error="handleError" name="uploadFile"
                    :headers="headers" :show-file-list='false'>
                    <el-button type="primary">导入</el-button>
                </el-upload>
                <el-button type="primary" class="float-right" @click="openAddDepartDia">新增院系</el-button>
            </div>
            <el-table :data="list">
                <el-table-column prop="departName" label="院系名称" width="200px" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="className" label="班级名称">
                    <template scope="scope">
                        <span class="inline-class" v-for="(c,index) in scope.row.classList" :key="c">{{c.className}}&#x3000;&#x3000;</span>
                    </template>
                </el-table-column>
                <el-table-column width="240px" align="right">
                    <template scope="scope">
                        <el-button size="small" type="text" @click.stop="updateDepartName(scope.row)">修改院系名称</el-button>
                        <el-button size="small" type="text" @click.stop="editDepart(scope.row)">详情</el-button>
                        <el-button size="small" type="text" @click.stop="deleteDepart(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-input v-model="departName" @keyup.enter.native="confirmOk" placeholder="请输入院系名称"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmOk">确定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" :plain="true">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                headers: {},
                title: "",
                departId: "",
                actionUrl: "",
                departName: "",
                dialogFormVisible: false
            };
        },
        mounted() {
            this.getDepartList();
            this.actionUrl = this.$util.domain + "/campusadminapi/v2/gradeclass/import";
            this.headers = {
                rootUnid: this.user.rootUnid
            };
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            // 获取院系列表
            getDepartList() {
                let url = this.$util.domain + "/campusadminapi/v2/gradeclass/alldepartmentclass";
                this.list = [];

                this.$http({
                    url,
                    method: "POST"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let list = response.data.data;
                        if (list && list.length > 0) {
                            for (let i = 0; i < list.length; i++) {
                                let $id = list[i].id,
                                    $departName = list[i].department,
                                    $classList = list[i].classList ? [...list[i].classList] : [];

                                this.list.push({
                                    id: $id,
                                    classList: $classList,
                                    departName: $departName
                                });
                            }
                        }
                    }
                });
            },
            handleSuccess(response) {
                if (response.error !== 10000) {
                    if (response.error == -10000) {
                        this.$util.errorMsg("服务器开小差");
                    } else {
                        this.$util.errorMsg(response.message);
                    }
                } else {
                    this.$util.successMsg("导入成功");
                    this.getDepartList();
                }
            },
            handleError(response) {
                if (response.status === 403) {
                    this.SIGNOUT();
                    location.href = "/login";
                }
                this.$util.errorMsg("文件上传失败");
            },
            defaultDepartModel() {
                location.href = "https://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/physical/department_class_v2.xlsx";
            },
            defaultDepartList() {
                let url = this.$util.domain + "/campusadminapi/v2/gradeclass/export";

                this.$http({
                    url,
                    method: "POST"
                }).then(response => {
                    if (response.data.error == 10000) {
                        location.href = response.data.data.exportUrl;
                    }
                });
                //
            },
            // 编辑
            editDepart(row) {
                this.$util.setStore("departName", row.departName);
                this.$util.setStore("departId", row.id);
                location.href = "/#/editAdminClass";
            },
            // 删除院系
            deleteDepart(row) {
                this.$confirm("您确定要删除“" + row.departName + "”吗？", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    let url = this.$util.domain + "/campusadminapi/v2/gradeclass/deletedepartmentclass";

                    this.$http({
                        url,
                        method: "POST",
                        body: JSON.stringify({
                            id: parseInt(row.id),
                            department: row.departName,
                            rootUnid: parseInt(this.user.rootUnid)
                        })
                    }).then(response => {
                        if (response.data.error == 10000) {
                            this.$util.successMsg("删除成功");
                            this.getDepartList();
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    });
                })
            },
            //新增院系
            openAddDepartDia() {
                this.title = "新增院系";
                this.dialogFormVisible = true;
                this.departName = "";
                this.departId = "";
            },
            //院系名称更改
            updateDepartName(row) {
                this.title = "修改院系名称";
                this.dialogFormVisible = true;
                this.departName = row.departName;
                this.departId = row.id;
            },
            //新增院系
            addDepart() {
                let url = this.$util.domain + "/campusadminapi/v2/gradeclass/savedepartment";
                this.dialogFormVisible = false;
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        department: this.departName.trim(),
                        rootUnid: this.user.rootUnid
                    })
                }).then(response => {
                    this.dialogFormVisible = false;
                    if (response.data.error == 10000) {
                        this.$util.successMsg("院系添加成功");
                        this.getDepartList();
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            //编辑院系名称
            editDepartName() {
                let url = this.$util.domain + "/campusadminapi/v2/gradeclass/updatedepartment";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        id: parseInt(this.departId),
                        department: this.departName.trim(),
                        rootUnid: this.user.rootUnid
                    })
                }).then(response => {
                    this.dialogFormVisible = false;
                    if (response.data.error == 10000) {
                        this.$util.successMsg("院系名称修改成功");
                        this.getDepartList();
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            confirmOk() {
                if (!this.departName || !this.departName.trim()) {
                    this.$util.errorMsg('院系名称不能为空');
                    return;
                }

                if (this.title == "新增院系") {
                    this.addDepart();
                } else {
                    this.editDepartName();
                }
            }
        }
    };
</script>

<style>
    #depart {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    #depart .list {
        padding-bottom: 20px;
        height: calc(100% - 30px);
    }

    #depart .float-right {
        float: right;
        margin-left: 10px;
    }

    #depart .el-upload--text {
        border-radius: 0;
        height: auto;
        width: auto;
    }

    #depart .inline-class {
        display: inline-block;
    }
</style>